<template>
    <div>
        <!-- 头部 -->
        <div class="nav">
            <img src="../Img/logo.png" style="width:25vw;height:6.5vh;margin-left:6vw;margin-top:1vh;" alt="">
            <img src="../Img/sousuo.png" style="width:4.5vw;height:4vh;margin-left:55vw;margin-top:2.5vh;" alt=""
                @click="$router.push('/sousuo')">
        </div>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe>
        <!-- 图标 -->
        <div class="tubiaodianji">

        </div>
        <!-- 占位 -->
        <div class="zw">

        </div>
        <!-- 成交订单 -->
        <div style="display:flex;background-color:white;width:100vw;height:6vh;">
            <div>
                <p style="font-size: 4vw;font-weight:600;line-height:6vh;margin-left:3vw;margin-right:6vw;">成交订单</p>
            </div>
            <van-notice-bar :scrollable="false">
                <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                    <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
                    <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
                    <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>

                </van-swipe>
            </van-notice-bar>
        </div>



        <div class="zw">

        </div>
    </div>
</template>
<script setup>



// 轮播图片
const images = [
    "https://game.mhcdkey.com/image/ask/200307/5udbfo5ipvo.jpg",
    "https://cbg2.fp.ps.netease.com/file/661fc793b323aadf59d0bd66qIrLkyEG05",
    "https://cbg2.fp.ps.netease.com/file/65e6faa626fbe14208b39122XTP3D89p05",
    "https://cbg2.fp.ps.netease.com/file/66038a657adcca666df0e28bgIsMhWub05",
    "https://cbg2.fp.ps.netease.com/file/622821cbb7b9d574596a72dbPQICrtb804"
]

let dingdan = [
    { id: 1, name: "张三", title: "三国杀", price: 100 },
    { id: 2, name: "李四", title: "明日方舟", price: 100 },
    { id: 3, name: "王五", title: "明日之后", price: 100 },
    { id: 4, name: "赵六", title: "永劫无间", price: 100 },
]

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}


/* 头部 */
.nav {
    width: 100%;
    height: 8vh;
    background-color: #CF1322;
    display: flex;
}


/* 图标区域 */
.tubiaodianji {
    width: 100vw;
    height: 15vh;
    background-color: red;
}

/* 占位 */
.zw {
    width: 100%;
    height: 1vh;
    background-color: #F2F2F2;
}

/* 文字滚动 */
.van-notice-bar {
    width: 73vw;
    background-color: white;
    height: 6vh;
    color: black;
}

.notice-swipe {
    height: 6vh;
    line-height: 6vh;
}
</style>